<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<title>Home</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link th:href="@{/shop/assets/css/style.css}" rel="stylesheet" type="text/css" media="all"/>
	<link rel="stylesheet" type="text/css" th:href="@{/shop/assets/css/style1.css}">
	<link th:href="@{/shop/assets/css/slider.css}" rel="stylesheet" type="text/css" media="all"/>
	<link rel="stylesheet" th:href="@{/shop/assets/css/qfbase.css}">

	<!--共有样式-->
	<link rel="stylesheet" th:href="@{/shop/assets/css/ql_index.css}">
	<link rel="stylesheet" th:href="@{/shop/assets/css/layer.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/shop/assets/css/layui.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/shop/assets/css/view.css}"/>
	<script type="text/javascript" th:src="@{/shop/js/jquery-1.11.3.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/layer.js}"></script>
	<!--<script type="text/javascript" th:src="@{js/jquery-1.9.0.min.js}"></script>-->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
        $(window).load(function () {
            $('#slider').nivoSlider();
        });
	</script>
	<!--首页banner样式-->
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>


<body>
<div>
	<div class="header">
		<div class="headertop_desc">
			<div class="wrap">
				<div class="nav_list">
					<ul>
						<li><a th:href="@{/video/shophome}">商城主页</a></li>
						<li><a href="contact.html">博客</a></li>
						<li><a href="contact.html">学院</a></li>
						<li><a href="index.html">问答</a></li>
						<li><a href="contact.html">下载</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
				</div>
				<div class="account_desc">
					<ul>
						<li><a th:href="@{/register}">注册</a></li>
						<li><a th:href="@{/login}">登录</a></li>
						<li><a th:href="@{/#}">写博客</a></li>
						<li><a th:href="@{/#}">我的账户</a></li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="wrap">
			<div class="header_top">
				<div class="logo">
					<a href="index.html"><img src="images/logo.png" alt=""/></a>
				</div>
				<div class="header_top_right">

					<div class="search_box">
						<form th:action="@{/video/findListByName}">
							<input type="text" value="搜索" name="brief" onfocus="this.value = '';" target="_blank"
								   onblur="if (this.value == '') {this.value = 'Search';}" autocomplete="on"><input type="submit" value="">
						</form>
					</div>
					<div class="clear"></div>
				</div>
				<script type="text/javascript">
                    function DropDown(el) {
                        this.dd = el;
                        this.initEvents();
                    }

                    DropDown.prototype = {
                        initEvents: function () {
                            var obj = this;

                            obj.dd.on('click', function (event) {
                                $(this).toggleClass('active');
                                event.stopPropagation();
                            });
                        }
                    }

                    $(function () {

                        var dd = new DropDown($('#dd'));

                        $(document).click(function () {
                            // all dropdowns
                            $('.wrapper-dropdown-2').removeClass('active');
                        });

                    });
				</script>
				<div class="clear"></div>
			</div>
		</div>


		<div class="main">
			<div class="wrap">
				<div class="content">
					<div class="content_top1">
						<div class="heading">
							<h3>查询到视频</h3>
						</div>
					</div>


					<div class="section1 group" >

						<div class="grid_11_of_5 images_11_of_5" th:each="video,iterStat :${videos}">

							<a th:href="@{/video/preview(id=${video.getId()})}"><img th:src="@{/shop/assets/images/end-game.jpg}" alt=""/></a>
							<h2><a th:href="@{/video/preview(id=${video.getId()})}" th:text="${video.getVideoname()}">初中英语1</a></h2>
							<div class="price-details">
								<div class="price-number">
									<span>￥</span><span class="rupees" th:text="${video.getPrice()}">620.87</span>
								</div>
								<div class="add-cart">
									<h4><a href="javascript:void(0);" th:onclick="'javascript:getSC2('+${video.id }+')'" >收藏</a></h4>
								</div>
								<div class="clear"></div>
							</div>
						</div>

					</div>

				</div>
                <!--分页导航-->
                <div id="pagination1"></div>
			</div>
		</div>


		<!--底部样式-->
		<div class="footer_style">
			<div class="footer">
				<div class="copys copys-list clearfix">
					<a href="#">网络文化经营许可证 京网文[2014]xxxxx-236号</a>
					<a href="#">京卫网审[2013]第0209号 网络110报警服务</a>
					<a href="#">药品服务许可证(京)-经营2222-0029</a>
					<a href="#">节目制作经营许可证京字670号</a>
				</div>
				<div class="link_name">
					<a href="#">关于我们</a>|<a href="#">媒体合作</a>|<a href="#">开放平台</a>|<a href="#">广告服务</a>|<a
						href="#">联系我们</a>|<a href="#">工作机会</a>|<a href="#">友情链接</a></div>
				<div class="Copyright">Copyright © 2004-2017 视频名称（xx.com）All rights reserved.</div>

			</div>

		</div>
		<!-- 代码 开始 -->
		<div class="go-top dn" id="go-top">

			<a href="zhuce.html" target="_blank" class="feedback"></a>
			<a href="javascript:;" class="go"></a>
		</div>
	</div>
</div>

<!--分页脚本-->

<script th:src="@{/shop/assets/layui.all.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var count = [[${count}]];//总数
    var curr = [[${curr}]];//当前页
    var contextPath = [[${#request.getContextPath()}]]; //当前应用路径
    /*]]>*/
</script>
<script type="text/javascript">
    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pagination1' //注意，这里的 data 是 ID，不用加 # 号
            ,count: count //数据总数，从服务端得到
            ,curr: curr
            ,limit: 4
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if(!first){
                    window.location.href = contextPath + "/video/findListByName?page=" + (obj.curr) + "&size=" + obj.limit
                }
            }
        });
    });
</script>




</body>
</html>

<!--异步收藏-->
<script>
    /*var id = [[${videos1}]];
	console.log(id)*/
    function getSC2(obj) {
        // console.log(obj)
        axios.get('/edu/video/collect?id=' + obj).then(function (res) {
            if (res.data == '1') {
                layer.msg('已收藏');
            }
        });
    }
</script>



<script type="text/javascript" src="js/ckplayer/ckplayer.js" charset="utf-8"></script>
<script>
    $(".bd").niceScroll({
        cursorcolor: "#888888",
        cursoropacitymax: 1,
        touchbehavior: false,
        cursorwidth: "5px",
        cursorborder: "0",
        cursorborderradius: "5px"
    });

    function playerstop() {
        setTimeend();
    }

    function setTimeend() {//获取下一部视频的播放ID
        nowD++;
        if (nowD >= videoarr.length) {
            nowD = 0;
        }
        playvideo(nowD);
    }

    var nowD = 0;//目前播放的视频的编号(在数组里的编号)
    var frontTime = false;//前置广告倒计时是否在运行中
    var frontHtime = false;//后置广告是否在进行中
    var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样
    videoarr.push('http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2');
    videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-1.flv');
    videoarr.push('http://movie.ks.js.cn/flv/2011/11/8-1.flv');
    videoarr.push('http://movie.ks.js.cn/flv/2014/04/24-2.flv');
    var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址，注意，因为本演示只有一种mp4文件，所以html5下所有用到的视频地址都是相同的，请见谅，另外，该数组是一个二维数组
    html5arr.push(['http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);

    function playvideo(n) {
        nowD = n;
        var flashvars = {
            f: videoarr[n],
            c: 0,
            p: 1,
            e: 0,
            my_url: encodeURIComponent(window.location.href)
        };
        // for (i = 0; i < videoarr.length; i++) {//这里是用来改变右边列表背景色
//                if (i != nowD) {
//                    CKobject._K_('vli_' + i).style.backgroundColor ='#262626';
//                }
//                else {
//                    CKobject._K_('vli_' + i).style.backgroundColor ='#DAF2FF';
//                }
//            }

        var video = ['http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2'];
        CKobject.embed('js/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);
    }

    playvideo(0);
</script>
<script type="text/javascript">

    $(function () {
        $("#videoArea").fix({
            float: 'right',	//default.left or right
            //minStatue : true,
            skin: 'green',	//default.gray or blue
            durationTime: 300
        });
    });
</script>
<script>
    /*********搜索*********/
    function submit_btn() {
        $(".search_style input[type$='text']").each(function (n) {
            if ($(this).val() == "") {

                layer.alert("搜索框不能为空！", {
                    title: '提示框',
                    icon: 0,
                });
                return false;
            }
            else {
                location.href = "search_page.html";

            }
        })
    }
</script>
<script>
    $(document).ready(function () {
        var w = parseInt(($(window).width() - 1200) / 2);
        $(".qlban_ad").css("right", w)
    });

</script>